Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 'use client';
import React, { Suspense, lazy } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Settings, DollarSign, Film, Database, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import useLoadNamespace from '@/hooks/useLoadNamespace';
// Lazy load each sub-section for performance
const SystemConfiguration = lazy(() => import('@/components/admin/SystemConfiguration'));
const CreditsPricingConfig = lazy(() => import('@/components/admin/CreditsPricingConfig'));
function TabLoading() {
return (
<div className="flex items-center justify-center py-16">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
);
}
interface SettingsPageProps {
className?: string;
}
export default function SettingsPage({ className }: SettingsPageProps) {
useLoadNamespace('admin/systemConfiguration');
const { t } = useTranslation(['admin/systemConfiguration', 'translation']);
return (
<div className={className}>
<Tabs defaultValue="general" className="w-full">
<TabsList className="w-full justify-start mb-6">
<TabsTrigger value="general" className="gap-1.5">
<Settings className="h-4 w-4" />
{t('systemConfiguration.settings.tabs.general')}
</TabsTrigger>
<TabsTrigger value="credits" className="gap-1.5">
<DollarSign className="h-4 w-4" />
{t('systemConfiguration.settings.tabs.credits')}
</TabsTrigger>
<TabsTrigger value="tmdb" className="gap-1.5">
<Film className="h-4 w-4" />
{t('systemConfiguration.settings.tabs.tmdb')}
</TabsTrigger>
<TabsTrigger value="database" className="gap-1.5">
<Database className="h-4 w-4" />
{t('systemConfiguration.settings.tabs.database')}
</TabsTrigger>
</TabsList>
<TabsContent value="general">
<Suspense fallback={<TabLoading />}>
<SystemConfiguration visibleSections={['content-display', 'login-backdrops', 'public-endpoints', 'config-summary']} />
</Suspense>
</TabsContent>
<TabsContent value="credits">
<Suspense fallback={<TabLoading />}>
<SystemConfiguration visibleSections={['credit-system']} />
<div className="mt-6">
<CreditsPricingConfig />
</div>
</Suspense>
</TabsContent>
<TabsContent value="tmdb">
<Suspense fallback={<TabLoading />}>
<SystemConfiguration visibleSections={['tmdb-config']} />
</Suspense>
</TabsContent>
<TabsContent value="database">
<Suspense fallback={<TabLoading />}>
<SystemConfiguration visibleSections={['database-tools']} />
</Suspense>
</TabsContent>
</Tabs>
</div>
);
}
|